<template>
  <div class="main">
    <!-- 员工查询 -->
    <el-card class="searchCard" shadow="never">
      <div slot="header" class="clearfix">
        <span>员工查询</span>
      </div>
      <el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item class="searchIpt" label="用户账号:">
          <el-input v-model="searchForm.userId" style="width:200px" size="mini" placeholder="请输入用户账号查询" />
        </el-form-item>
        <div class="searchBtn">
          <el-form-item>
            <el-button plain @click="reset">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doSearch">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
    <el-card class="staffList" shadow="never">
      <div slot="header" class="staffHeader">
        <span>员工管理</span>
        <el-button size="small" type="primary" @click="add()">新增</el-button>
        <!-- 新增用户 -->
        <el-dialog title="新增用户" :visible.sync="dialogFormVisible" top="15%" width="450px" @close="dialogClose">
          <el-form ref="addForm" :model="form" :rules="rules">
            <el-form-item label="用户账号" size="mini" prop="staffAccount" :label-width="formLabelWidth">
              <el-input v-model="form.staffAccount" placeholder="请输入用户账号" style="width:250px" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" size="mini" prop="password" :label-width="formLabelWidth">
              <el-input v-model="form.password" type="password" placeholder="8到20位数字和字母组成,不可为纯数字" style="width:250px" autocomplete="off" />
            </el-form-item>
            <el-form-item label="联系人" prop="contactName" size="mini" :label-width="formLabelWidth">
              <el-input v-model="form.contactName" placeholder="请输入联系人" style="width:250px" autocomplete="off" />
            </el-form-item>
            <el-form-item label="角色" prop="role" size="mini" :label-width="formLabelWidth">
              <el-select v-model="form.role" placeholder="请选择">
                <el-option label="超级管理员" :value="7" />
                <el-option label="财务" :value="2" />
                <el-option label="运营" :value="3" />
              </el-select>
            </el-form-item>
            <div class="dialog-footer">
              <el-button @click="cancelAdd">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
            </div>
          </el-form>
        </el-dialog>
      </div>
      <!-- 员工管理列表 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column
          prop="staffAccount"
          label="用户账号"
          width="400"
        />
        <el-table-column
          prop="contactName"
          label="联系人"
          width="400"
        />
        <el-table-column
          prop="role"
          label="角色"
          width="400"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="300"
        >
          <!-- 操作按钮部分 -->
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 显示表单信息 -->
      <el-dialog
        title="用户信息"
        :visible.sync="dialogVisible"
        width="20%"
        style="margin-top:220px;"
      >
        <div class="userMessage">
          <div>用户账号：{{ userMessage.staffAccount }}</div>
          <div>联系人：{{ userMessage.contactName }}</div>
          <div>角色：{{ userMessage.role }}</div>
        </div>
      </el-dialog>
      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.PageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

  </div>
</template>

<script>
import { isvalidPhone, isvalidPass, isvalidName } from '@/utils/validate'
import staffManageApi from '@/api/staffManage/index'
// 用户名
var validPhone = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入电话号码'))
  } else if (!isvalidPhone(value)) {
    callback(new Error('请输入正确的11位手机号码'))
  } else {
    callback()
  }
}
// 密码
var validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (!isvalidPass(value)) {
    callback(
      new Error('8到20位数字、字母或符号组成,不可为纯数字')
    )
  } else {
    callback()
  }
}
// 联系人
var validName = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入检测人'))
  } else if (!isvalidName(value)) {
    callback(
      new Error('由2-20个中文或英文组成')
    )
  } else {
    callback()
  }
}

export default {
// import引入的组件需要注入到对象中才能使用,
  components: {},
  data() {
    // 这里存放数据
    return {
      // 当前页数
      pagenum: 1,
      // 每页数据
      pagesizeVal: 0,
      // 用户信息
      userMessage: {

      },
      // 表单验证
      rules: {
        staffAccount: [
          { required: true, trigger: 'blur', validator: validPhone }
        ],
        password: [
          { required: true, trigger: 'blur', validator: validatePass }
        ],
        contactName: [
          { required: true, trigger: 'blur', validator: validName }
        ],
        role: [
          { required: true, message: '请选择角色人', trigger: 'change' }
        ]
      },
      // 查看表单内容显示
      dialogVisible: false,
      // 新增表单显示
      dialogFormVisible: false,
      form: {
        staffAccount: '',
        contactName: '',
        password: '',
        role: ''
      },
      formLabelWidth: '120px',
      // 分页设置 haokuna
      page: {
        currentPage: 1, // 当前页
        pageSizes: [5, 10, 15, 20], // 预设每页显示个数
        pageSize: 5, // 每页显示个数
        total: 0 // 总条目数
      },

      searchForm: { // 搜索表单
        userId: ''
      },
      // 员工列表数据
      tableData: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getStaffList()
    this.getPagenation()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    // 分页事件
    getPagenation() {
      staffManageApi.findPage({
        pageNum: this.pagenum,
        pageSize: this.pagesizeVal
      }).then(res => {
        this.page.total = res.data.totalSize
        this.tableData = res.data.content
        // console.log(res)
      })
    },
    // 获取列表数据
    getStaffList() {
      this.loading = true // 打开loading动画
      setTimeout(() => {
        staffManageApi.staffmanageIndex().then(res => {
          if (res.code === 0) {
            console.log(res)
            this.tableData = res.data
            // console.log(this.tableData)
          } else {
            this.$message.error('获取列表失败')
          }
        })
        this.loading = false// 关闭loading动画
      })
    },
    // 点击新增按钮,新增内容
    add() {
      this.dialogFormVisible = true
      this.form.staffAccount = ''
      this.form.contactName = ''
      this.form.role = ''
      this.form.password = ''
      console.log(this.form)
    },
    // 编辑表单内容
    edit(val) {
      this.dialogFormVisible = true
      this.form.staffAccount = val.staffAccount
      this.form.contactName = val.contactName
      this.form.role = val.role
      this.form.password = val.password
      console.log(this.form)
    },
    // 查询按钮方法
    doSearch() {
      console.log('查询', this.searchForm.userId)
    },
    // 重置按钮方法
    reset() {
      console.log('重置')
      this.searchForm.userId = ''
    },
    // 查看表单内容按钮
    handleClick(row) {
      this.dialogVisible = true
      this.userMessage = row
      console.log(row)
    },

    // 每页多少条
    handleSizeChange(val) {
      this.pagesizeVal = val
      this.getPagenation()
    },
    // 求改页数
    handleCurrentChange(val) {
      this.pagenum = val
      this.getPagenation()
    },

    // 关闭窗口清空添加表单
    resetForm() {
      this.$refs.addForm.resetFields()
    },
    dialogClose() {
      this.resetForm()
    },
    // 点击确认按钮 清空并且关闭表单,
    submit() {
      // 提交并且验证表单内容
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          // alert('submit!')
          this.dialogFormVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 点击关闭按钮 清空并且关闭表单
    cancelAdd() {
      this.dialogFormVisible = false
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
.main{
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
  overflow: hidden;
 .searchCard{
   margin:30px;
   .clearfix{
     line-height: 22px;
   }
   .demo-form-inline{
     display: flex;
     justify-content: space-between;
   }
 }
 .staffList{
   margin: 30px;
   .block{
     padding: 20px;
     display: flex;
     justify-content: center;
   }
 }
.staffHeader{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.userMessage{
  padding: 0px 10px
}
.userMessage div{
  margin-bottom: 20px;
}
}
</style>
